<section class="home">
  <!-- banner图 -->
  <h1>
    <el-carousel arrow="always" height="422px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>
          <img src="../../assets/homeimg/banner.png" alt="">
        </h3>
      </el-carousel-item>
    </el-carousel>
  </h1>
  <!-- 添加自选产品 -->
  <div class="optional-goods">
    <!-- 添加自选商品定位 -->
    <span class="selfgoods">添加自选产品</span>
    <el-tabs v-model="activeName"  @tab-click="handleClick">
      <el-tab-pane label="自选产品清单" name="first">
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="日期" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="180">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="最新现货" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="HDPE" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="LDPE" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="LLDPE" name="five">定时任务补偿</el-tab-pane>
      <el-tab-pane label="PP均聚" name="six">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
  <!-- 查看更多 -->
  <div class="search-morr">
    <!-- 产看更多定位 -->
    <span class="lookmore">查看更多</span>
    <el-tabs v-model="activeName"  @tab-click="handleClick">
      <el-tab-pane label="最新公司" name="first">
        <el-row>
          <el-col :span="12">
            <div class="look-box">
              <img src="../../assets/homeimg/daoen.png" alt="" class="look-img">
              <div class="look-right-box">
                <p>山东道恩集团有限公司营销中心</p>
                <h3>
                  <img src="../../assets/homeimg/renzheng.png" alt="">
                </h3>
                <ul>
                  <li>山东省龙口经济开发区东首发</li>
                  <li>19-50人</li>
                  <li>材料分类：工程塑料、助剂</li>
                  <li>主营产品: PP、PE</li>
                </ul>
                <button type="">查看详情</button>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="look-box lookright">
              <img src="../../assets/homeimg/daoen.png" alt="" class="look-img">
              <div class="look-right-box">
                <p>山东道恩集团有限公司营销中心</p>
                <h3>
                  <img src="../../assets/homeimg/renzheng.png" alt="">
                </h3>
                <ul>
                  <li>山东省龙口经济开发区东首发</li>
                  <li>19-50人</li>
                  <li>材料分类：工程塑料、助剂</li>
                  <li>主营产品: PP、PE</li>
                </ul>
                <button type="">查看详情</button>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="look-box">
              <img src="../../assets/homeimg/daoen.png" alt="" class="look-img">
              <div class="look-right-box">
                <p>山东道恩集团有限公司营销中心</p>
                <h3>
                  <img src="../../assets/homeimg/renzheng.png" alt="">
                </h3>
                <ul>
                  <li>山东省龙口经济开发区东首发</li>
                  <li>19-50人</li>
                  <li>材料分类：工程塑料、助剂</li>
                  <li>主营产品: PP、PE</li>
                </ul>
                <button type="">查看详情</button>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="look-box lookright">
              <img src="../../assets/homeimg/daoen.png" alt="" class="look-img">
              <div class="look-right-box">
                <p>山东道恩集团有限公司营销中心</p>
                <h3>
                  <img src="../../assets/homeimg/renzheng.png" alt="">
                </h3>
                <ul>
                  <li>山东省龙口经济开发区东首发</li>
                  <li>19-50人</li>
                  <li>材料分类：工程塑料、助剂</li>
                  <li>主营产品: PP、PE</li>
                </ul>
                <button type="">查看详情</button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="通用塑料" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="工程塑料" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="特种工程塑料" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="热塑性弹性体" name="five">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
  <!-- 更多专家 -->
  <div class="zhuan-morr">
    <!-- 更多专家 -->
    <span class="moreexpert">更多专家</span>
    <el-tabs v-model="activeName"  @tab-click="handleClick">
      <el-tab-pane label="最新专家" name="first">
        <div class="expert-box">
          <div class="person-expert">
            <div class="expert-title clearfix">
              <img src="../../assets/homeimg/photo.png" alt="">
              <span class="user">依依</span>
            </div>
            <p class="yingyong">应用分类:精细化工（包括日用化工、橡胶印染助剂、有机合成等）</p>
            <p>擅长技术:塑料、塑料、胶黏剂、油墨、涂料、清洗剂、金属表面处理剂、金属加工助剂、纺织染整助剂、水处理药剂、建筑助剂、生化试剂、农药、皮革助剂</p>
            <h6>收费:70元/次 70元/分钟</h6>
            <div class="btn-group-my">
              <button type="" class="active-btn">电话咨询</button>
              <button type="">网上查询</button>
            </div>
          </div>
          <div class="person-expert">
            <div class="expert-title clearfix">
              <img src="../../assets/homeimg/photo.png" alt="">
              <span class="user">依依</span>
            </div>
            <p class="yingyong">应用分类:精细化工（包括日用化工、橡胶印染助剂、有机合成等）</p>
            <p>擅长技术:塑料、塑料、胶黏剂、油墨、涂料、清洗剂、金属表面处理剂、金属加工助剂、纺织染整助剂、水处理药剂、建筑助剂、生化试剂、农药、皮革助剂</p>
            <h6>收费:70元/次 70元/分钟</h6>
            <div class="btn-group-my">
              <button type="" class="active-btn">电话咨询</button>
              <button type="">网上查询</button>
            </div>
          </div>

          <div class="person-expert">
            <div class="expert-title clearfix">
              <img src="../../assets/homeimg/photo.png" alt="">
              <span class="user">依依</span>
            </div>
            <p class="yingyong">应用分类:精细化工（包括日用化工、橡胶印染助剂、有机合成等）</p>
            <p>擅长技术:塑料、塑料、胶黏剂、油墨、涂料、清洗剂、金属表面处理剂、金属加工助剂、纺织染整助剂、水处理药剂、建筑助剂、生化试剂、农药、皮革助剂</p>
            <h6>收费:70元/次 70元/分钟</h6>
            <div class="btn-group-my">
              <button type="" class="active-btn">电话咨询</button>
              <button type="">网上查询</button>
            </div>
          </div>

          <div class="person-expert">
            <div class="expert-title clearfix">
              <img src="../../assets/homeimg/photo.png" alt="">
              <span class="user">依依</span>
            </div>
            <p class="yingyong">应用分类:精细化工（包括日用化工、橡胶印染助剂、有机合成等）</p>
            <p>擅长技术:塑料、塑料、胶黏剂、油墨、涂料、清洗剂、金属表面处理剂、金属加工助剂、纺织染整助剂、水处理药剂、建筑助剂、生化试剂、农药、皮革助剂</p>
            <h6>收费:70元/次 70元/分钟</h6>
            <div class="btn-group-my">
              <button type="" class="active-btn">电话咨询</button>
              <button type="">网上查询</button>
            </div>
          </div>

        </div>
      </el-tab-pane>
      <el-tab-pane label="挤出成型" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="注塑成型" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="滚塑成型" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="泡沫成型" name="five">定时任务补偿</el-tab-pane>
      <el-tab-pane label="热成型" name="six">定时任务补偿</el-tab-pane>
      <el-tab-pane label="专用料" name="seven">定时任务补偿</el-tab-pane>
      <el-tab-pane label="橡胶类" name="eight">定时任务补偿</el-tab-pane>
      <el-tab-pane label="热塑性弹性体类" name="nine">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</section>
